import React, { Component } from 'react'
import { Text, StyleSheet, View, Image, TouchableOpacity } from 'react-native'
import { px2dp } from '../../../utils/util';
import PropTypes from 'prop-types'
export default class Shopcar_bottom extends Component {
  static propTypes = {
    userInfo: PropTypes.object,
    playType: PropTypes.number,
    mapNumberList: PropTypes.array,
    submit: PropTypes.func,
  }
  constructor(props) {
    super(props)
  
    this.state = {
      bunch_type: '1_1',
      multiple: 10,
    }
    this.submit = this.submit.bind(this)
  }
  computedNode(arr=[]){
    return arr.reduce((int,num)=>{
      int+=num;
      return int;
    },0)
  }
  toPlayType(bunch_type){
    const bunchTypeList = {
      '1_1': '单关'
    }
    return bunchTypeList[bunch_type]
  }
  submit(){
    let {bunch_type,multiple} = this.state;
    let sendData = {
      bunch_type,
      multiple
    }
    this.props.submit(sendData)
  }

  render() {
    let {userInfo,mapNumberList} = this.props;
    let {multiple,bunch_type} = this.state;
    return (
      <View style={bottomStyle.wrap}>
        <View style={[bottomStyle.betBox,bottomStyle.flexAroundBox]}>
          <View style={[bottomStyle.rowBox,bottomStyle.flexAroundBox]}>
            <Text>过关方式</Text>
            <View style={[bottomStyle.flexAroundBox]}>
              <Text style={[bottomStyle.rowText]}>{this.toPlayType(bunch_type)}</Text>
              <Image source={require('../../../assets/image/jiantou_bottom_icon.png')} style={{width:px2dp(28),height:px2dp(16)}}></Image>
            </View>
          </View>
          <View style={[bottomStyle.rowBox,bottomStyle.flexAroundBox]}>
            <Text>过关方式</Text>
            <View style={[bottomStyle.flexAroundBox]}>
              <Text style={[bottomStyle.rowText]}>{multiple}倍</Text>
              <Image source={require('../../../assets/image/jiantou_bottom_icon.png')} style={{width:px2dp(28),height:px2dp(16)}}></Image>
            </View>
          </View>
        </View>
        <View style={[bottomStyle.flexAroundBox,bottomStyle.showBox]}>
          <View style={[bottomStyle.showBox_left]}>
            <Text>{this.computedNode(mapNumberList)}注x2元x10倍=80.00元</Text>
            <Text>可用余额: {userInfo.balance}元</Text>
          </View>
          <TouchableOpacity 
            style={bottomStyle.showBox_right}
            onPress = {this.submit}
          >
            <Text style={bottomStyle.button}>投注</Text>
          </TouchableOpacity>
         
        </View>
      </View>
    )
  }
}

const bottomStyle = StyleSheet.create({
  wrap: {
    backgroundColor: '#fff',
    // backgroundColor: 'blue',
    height: px2dp(180),
    // flexDirection: 'row',
    // justifyContent: 'space-between',
    // alignItems: 'center'
  },
  flexAroundBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  betBox: {
    height: px2dp(80),
    borderBottomColor: '#ccc',
    borderStyle: 'solid',
    borderBottomWidth:  px2dp(1),
  },
  rowBox: {
    flex:1,
    paddingHorizontal: px2dp(30),
  },
  rowText: {
    color: '#333',
    paddingRight: px2dp(10)
  },
  showBox: {
    
  },
  showBox_left: {
    flex: 2,
    paddingHorizontal: px2dp(30)
  },
  showBox_right: {
    // flex: 1
  },
  button: {
    width: px2dp(230),
    height: px2dp(100),
    backgroundColor: '#ff473a',
    textAlign: 'center',
    color: '#fff',
    fontSize: px2dp(32),
    lineHeight: px2dp(100),
  }

})
